<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>常用样式</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<!--
      4.2 表单
      4.2.1.表单控件
                .form-control  .input-lg（较大） .input-sm（较小）
      4.2.1.1.输入框text
               . form-control
-->

<!--表单
     表单
          1.文本框
                   .form-control表单元示的样式表单控件的大小，input-1g.input-sm
          2.下拉框
                    .form-control表单元的样式multiple="multiple”设置下拉框多选
          3.文本域
                    .form-control表单元系的样式


          4.复选框
                垂直显示，checkbox
                水平显示.checkbox-inline
          5.单选框
                垂直显示.radio
                水平显示.radio-inline
          6.按钮
                1. 使用按钮
                   基础样式：btn
                   <button class="btn">按钮</button>
                   附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link
                2.多标签使用
                   其他标签可以通过添加按钮样式设置成按钮效果（a标签、span标签等）
                3.按钮大小
                   大按钮.btn-1g
                   正常按钮.btn-sm
                   小按钮.btn-xs
                4.按钮禁用
                   1.通过disabled属性（真正的禁用元素）
                   2.通过disabled样式（样式上禁用）

-->


<input type="text"> <br>

<select name="" id="">

    <option value="">山海</option>
    <option value="">北京</option>
</select>

<br>

<textarea name="" id="" cols="30" rows="10"></textarea>


<div class="row">
   <!--文本框-->
    <div class="col-md-3">
        输入:<input class="form-control" type="text">
        输入:<input class="form-control input-lg" type="text">
        输入:<input class="form-control input-sm" type="text">
    </div>
</div>

   <!--下拉框-->
<div class="row">
<div class="col-md-3">
         选择城市：
        <select name="" id="" class="form-control">
    <option value="">山海</option>
    <option value="">北京</option>
        </select>

    </div>
</div>

   <!--文本域-->
<div class="row">
<div class="col-md-3">

<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>


    </div>
</div>

<hr>

   <!--复选框-->


<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby"/>跳舞 <br>
<input type="radio" name="habit"/>吸毒
<input type="radio" name="habit"/>嫖娼

   <!--垂直 复选框-->
<div class="row">
    <div class="col-md-3">
         <div class="checkbox">
             <label><input type="checkbox" name="hobby"/>唱歌</label>
         </div>
        <div class="checkbox">
             <label><input type="checkbox" name="hobby"/>跳舞</label>
         </div>
         <div class="radio">
             <label><input type="radio" name="habit"/>男</label>
         </div>
        <div class="radio">
             <label><input type="radio" name="habit"/>女</label>
         </div>

    </div>
</div>

     <!--水平 复选框-->
<div class="row">
    <div class="col-md-3">

             <label class="checkbox-inline"><input type="checkbox" name="hobby"/>唱歌</label>
          <label class="checkbox-inline"><input type="checkbox" name="hobby"/>跳舞</label>

             <label class="radio-inline"><input type="radio" name="habit"/>男</label>
             <label class="radio-inline"><input type="radio" name="habit"/>女</label>

    </div>

</div>

<hr>

<!--按钮-->

<button class="btn">按钮</button>

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
<p>其他标签变成按钮</p>
<a href="#" class="btn btn-danger">a标签</a>
<span class="btn btn-info">span标签</span>
<div class="btn bg-primary">div标签</div>

<p>设置按钮的大小</p>

<a href="#" class="btn btn-danger">a标签</a>
<span class="btn btn-info btn-lg">span标签</span>
<div class="btn bg-primary btn-sm">div标签</div>
<div class="btn bg-primary btn-xs">div标签</div>

<br>

<p>按钮禁用</p>
<p>在标签中添加disabled属性</p>
<button class="btn btn-info" onclick="alert('点击成功')">按钮</button>
<br>
<p>样式和功能都禁用</p>
<button class="btn btn-info " onclick="alert('点击成功')" disabled="disabled">按钮</button>
<p>样式禁用</p>
<button class="btn btn-info disabled" onclick="alert('点击成功')" >按钮</button>




    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>


